import { Header } from '@/components/layout/header'
import { Main } from '@/components/layout/main'
import { ProfileDropdown } from '@/components/profile-dropdown'
import { Search } from '@/components/search'
import { ThemeSwitch } from '@/components/theme-switch'
import { columns } from './components/dicts-columns'
import { DictsDialogs } from './components/dicts-dialogs'
import { DictsPrimaryButtons } from './components/dicts-primary-buttons'
import { DictsTable } from './components/dicts-table'
import DictsProvider from './context/dicts-context'
import { getRouteApi } from '@tanstack/react-router'

export default function Dicts() {
    const routeApi = getRouteApi('/_authenticated/dicts/')
    const { dictList } = routeApi.useLoaderData()

    return (
        <DictsProvider>
            <Header fixed>
                <Search />
                <div className='ml-auto flex items-center space-x-4'>
                    <ThemeSwitch />
                    <ProfileDropdown />
                </div>
            </Header>

            <Main>
                <div className='mb-2 flex flex-wrap items-center justify-between space-y-2'>
                    <div>
                        <h2 className='text-2xl font-bold tracking-tight'>Dictionary List</h2>
                        <p className='text-muted-foreground'>
                            Manage your dictionaries and their values here.
                        </p>
                    </div>
                    <DictsPrimaryButtons />
                </div>
                <div className='-mx-4 flex-1 overflow-auto px-4 py-1 lg:flex-row lg:space-y-0 lg:space-x-12'>
                    <DictsTable data={dictList} columns={columns} />
                </div>
            </Main>
            <DictsDialogs />
        </DictsProvider>
    )
}
